<template>
  <div class="boss">
    <Top></Top>

    <!-- 招聘总区域 -->
    <div class="recruit">
      <!-- 版心区域 -->
      <div class="center area-center">
        <Head title="招聘(年薪12万以上+)" id="back"> </Head>
        <!-- 招聘头部区域 -->
        <div class="context">
          <div
            class="title m-t-07"
            v-for="(item, index) in city"
            :key="index"
            @click="nationwide(index)"
          >
            <div
              class="yuan"
              :class="[index == curr ? 'backactive' : '']"
            ></div>
            <div
              class="text title_word"
              :class="[index == curr ? 'active' : '']"
            >
              {{ item.text }}
            </div>
          </div>
        </div>

        <!-- 底部区域 -->
        <div class="bottom">
          <!-- 招聘小盒子 -->
          <div
            class="small title_word verdana m-t-07"
            v-for="(item, index) in address"
            :key="index"
            @click="recruit(item, index + 1)"
          >
            <div class="left">{{ index + 1 }}.</div>
            <div class="zhong">{{ item.recruitName }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Top from "@/components/Home/TopPage.vue";
import Head from "@/components/public/HeadPage.vue";
import { selectRecruitName } from "@/api/index";
export default {
  data() {
    return {
      city: [
        { text: sessionStorage.getItem("provincesub") + "名企招聘" },
        { text: "全国各企招聘" },
      ],
      // 定位的地址
      citysub: sessionStorage.getItem("provincesub"),
      curr: "0", //初始化的高亮
      address: [],
    };
  },
  components: {
    Top,
    Head,
  },
  //招聘发送请求的
  created() {
    this.positioning();
  },
  methods: {
    //全国各企
    nationwide(index) {
      this.curr = index;
      if (index == 1) {
        selectRecruitName().then((res) => {
          if (res.data.code == 200) {
            this.address = res.data.data;
          }
        });
      } else {
        this.positioning();
      }
    },
    //封装的请求
    positioning() {
      selectRecruitName({
        recruitArea: this.citysub,
      }).then((res) => {
        if (res.data.code == 200) {
          this.address = res.data.data;
        }
      });
    },
    //招聘跳详情
    recruit(item, index) {
      // console.log(i);
      this.$router.push({
        path: "/recruitThree",
        query: { i: item.recruitName, index, id: item.recruitId },
      });
    },
  },
};
</script>
    <style scoped>
/* 大盒子区域 */
.boss {
  width: 100%;
  height: 100%;
  /* padding-bottom: .55rem;
      background-color: #f0eff5; */
}
.bottom {
  margin-top: 0.2rem;
}
h3 {
  height: 0.3rem;
  color: red;
  font-size: 0.2rem;
  line-height: 0.3rem;
  padding-left: 0.15rem;
}
/* 图标区域 */
.top h3 img {
  width: 0.24rem;
  margin-right: 0.05rem;
}
.title {
  display: flex;
  align-items: center;
}
/* 商会新闻的原点 */
.yuan {
  width: 0.1916rem;
  height: 0.19rem;
  margin-left: 0.04rem;
  border-radius: 50%;
  background-color: black;
}
/* 商会新闻文字区域 */
.title .text {
  line-height: 0.3rem;
  padding-left: 0.05rem;
  text-align: center;
}
/* 招聘总区域 */
.recruit {
  display: flex;

  background-color: white;
  justify-content: center;
}

/* 招聘头部区域 */
.top {
  height: 0.4rem;
}
/* 文字图片区域 */
.wentu {
  width: 30%;
  height: 100%;
  display: flex;
}
/* 图片区域 */
.tu {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.tu img {
  width: 0.4rem;
  height: 0.35rem;
}
/* 文字区域 */
.wen {
  width: 50%;
  height: 100%;
  font-size: 0.26rem;
  font-weight: 700;
  text-align: center;
  line-height: 0.4rem;
}
/* 招聘小盒子 */
.small {
  width: 100%;
  min-height: 0.3rem;
  display: flex;
}
/* 左边区域 */
.left {

  height: 100%;
  text-align: center;
  line-height: 0.3rem;
}

/* 中间区域 */
.zhong {
  height: 100%;
  line-height: 0.3rem;
}
/* 右边区域 */
.right {
  width: 5%;
  height: 100%;
}
</style>